import React, { Component } from 'react';

class Box extends Component {
  render(){
    return (<h1>你好中国</h1>)
  }

  // ---------------------- 组件卸载 ------------------------
  componentWillUnmount(){
    console.log('Box组件被卸载了');
  }
}


class App extends Component {
  // --------------- 挂载阶段 --------------------
  constructor(props){
    console.log('constructor 被调用了');
    super(props)
    this.state = {
      count: 100
    }
  }

  // 该函数在初始挂载阶段调用，更新时也会被调用
  // 因为挂载和更新都有专门的方法，所以这个方法使用频率比较低
  // static getDerivedStateFromProps(props, state){
  //   // props（父组件传递的内容）, state（当前组件的状态）
  //   console.log(props, state);

  //   // 返回值是修改 state 数据的，返回的内容就是最新 state 的内容
  //   return {
  //     count: state.count + 1
  //   }
  // }

  // ***************** render 会在挂载和更新阶段被执行
  render() {
    console.log('render 被调用了');
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={()=>{
            this.setState({
              count: this.state.count + 1
            })
        }}>修改 count </button>

        {this.state.count === 100 && <Box />}

      </div>
    );
  }

  // **************** 初始挂载阶段会调用的函数
  componentDidMount(){
    // 一般情况下可以在这里进行数据请求
    console.log('组件挂载：componentDidMount');
  }

  // ----------------------- 更新阶段 ---------------------
  // static getDerivedStateFromProps(props, state)

  // 该函数是在数据更新时调用，可以用来提升 react 性能的方法
  // 指明在特定的情况下才会做数据的重新渲染，在不是必须的情况下
  // 就返回 false 不在渲染
  // 该方法使用频率比较低
  shouldComponentUpdate(nextProps, nextState){
    // 在数据更新后，但是视图还没有更新的时候执行的函数
    console.log('shouldComponentUpdate',nextProps, nextState);
    if(nextState.count === 105){
      // 返回 false 的时候就不会执行 render 函数
      return false
    }else {
      // 返回 true 就会执行 render 重新做渲染
      return true
    }
  }

  //在最近一次渲染输出(提交到真实 DOM 节点)之前被调用
  getSnapshotBeforeUpdate(prevProps, prevState){
    // 可以获取到更新之前的值
    console.log('getSnapshotBeforeUpdate',prevProps, prevState);

    // 这里的返回值是被当做 componentDidUpdate 的第三个参数使用
    return '你好世界'
  }

  // ************** 组件更新阶段调用
  componentDidUpdate(prevProps,prevState, snapshot){
    console.log('componentDidUpdate', prevProps,prevState, snapshot);
  }

}



export default App;
